<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="initial-scale=1.0,minimum-scale=1.0,maximum=1.0,user-scalable=no,width=device-width" name="viewport">
    <meta name="referrer" content="never">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文章详情</title>
    <!-- Bootstrap -->
    <link href="/xj/css/bootstrap.min.css" rel="stylesheet">
    <link href="/xj/css/global.css" rel="stylesheet">
    <link href="/xj/css/style.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="/xj/js/html5shiv.min.js"></script>
    <script src="/xj/js/respond.min.js"></script>
    <![endif]-->


</head>

<style type="text/css">

    *{margin: 0; padding: 0;}

   .infor_content_box{
      width: 100%;
       height: 100%;
       background-color: #FFFFFF;

       margin-bottom: 100px;
   }

    .infor_title{
        font-size: 20px;
        font-weight: bold;
        padding-top: 10px;
    }

    .infor-type{
        color: #00489d;
    }

    .infor_time{
        color: #b5b5b5;
    }
    
    .infor_main{
        color: #7c879b;

    }

    .infor_main img{
        width: 95%;
    }

</style>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/xj/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/xj/js/bootstrap.min.js"></script>
<div class="globalstyle">
<div class="infor_content_box">
    <div class="box" style="padding-left: 0px!important;">
        <img src="/xj/image/icon/arrow_left.png" class="back_icon"  v-on:click="getback">
    </div>
    <div style=" padding-left: 10px;padding-right: 10px;">
       <p class="infor_title">{{title}}</p>
       <div style="margin-bottom: 15px;">
           <!--<span class="infor-type">信基沙溪（沈阳）</span>-->
           <span class="infor_time">{{create_time}}</span>
       </div>
       <div class="infor_main" v-html ="content">

       </div>
    </div>
</div>
</div>

</body>

</html>

<style>
    /*.footer_bar a{*/
    /*color: #7f8698!important;*/
    /*}*/

    .nav-pills>li>a{
        border-radius: 0px!important;
    }

    .nav-pills>li+li {
        margin-left: 0px!important;
    }
</style>

<script src="/xj/js/vue.min.js"></script>
<script>
    /**
     * Created by Administrator on 2019-7-15.
     */
    new Vue({
        el: '.infor_content_box',
        data: {
            infor_content:'',
            title:'',
            create_time:'',
            content:"",
        },
        mounted: function(){
            var self = this;
            var detail_id = self.getQueryValue("id");
            console.log(detail_id);
            $.ajax({
                type:"GET",
                url:"/infor/getInforDetail",
                data: {
                    id:detail_id,
                    language:"cn"
                },
                dataType:"json",
                success:function(data){
                    console.log(JSON.stringify(data));
                    self.infor_content = data;
                    self.title = self.infor_content.title;
                    self.content = self.infor_content.content;
                    self.create_time = self.infor_content.create_time.slice(0,10);
                }
            });
        },
        methods: {
            getQueryValue:function (a) {
                var query = decodeURI(window.location.search.substring(1));
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == a) { return pair[1]; }
                }
                return null;
            },

            getback:function () {
                window.history.back(-1);
            },
        }
    });

</script>
